<template>
    <div class="detailList">
        <h3 style="padding-left:4vw;font-size:24px;font-weight:100;color:#333333;line-height: 3em">本月提成明细</h3>
        <ul>
            <li class="homeDteailLists" v-for="(item,index) in list" :key="index">
                <div style="color:#333333;font-size:15px;line-height:3em">
                    <span>{{item.time}}</span>
                    <span style="float:right">合计：<span style="color:#FF4C50">{{item.sum.toFixed(2)}}</span>元</span>
                </div>
                <ul>
                    <li v-for="(item1,index1) in item.list" :key="index1" style="overflow:hidden;margin-bottom:20px">
                        <div class="homeDetailMsg">
                            <span><img :src="item1.image" alt=""></span>
                            <div style="margin-left:7px">
                                <span style="font-size:13px;line-height:2em;color:#333333">{{item1.user_name}}</span>
                                <span style="font-size:12px;color:#666666">{{item1.time}}</span>
                            </div>
                        </div>
                        <div class="homeDetailTicheng">
                            <p style="font-size:13px;line-height: 2em;color:#333333">提成：<span style="color:#FF4C50">{{item1.extract_money}}</span>元</p>
                            <p style="font-size:12px;color:#666666">消费：{{item1.order_money}}元</p>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        name: "detailList",
        components:{
            
        },
        data() {
            return {
                
            };
        },
        props:['list'],
        created(){
        
        },
        mounted(){
        
        }
    }
</script>

<style scoped lang="scss">
.detailList{
    .homeDteailLists{
        width: 92vw;
        margin: 0 auto;
    }
    .homeDetailMsg{
        float: left;
        >span{
            width:45px;
            height: 45px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img{
                width: 100%;
                height: 100%;
            }
        }
        >div{
            display: inline-block;
            vertical-align: middle;
            span{
                display: block;
            }
        }
    }
    .homeDetailTicheng{
        float:right;
    }
}
    
</style>
